<template>
  <div>
    <input type="button" @click="addMarker" class="btn" value="add">
    <input type="button" @click="openInfo" class="btn" value="open">
    <input type="button" @click="removeMarker" class="btn" value="remove">

    <div id="container"></div>
  </div>

</template>

<script>
var map, infoWindow = {}
var markerList = []
import AMap from 'AMap';

export default {
  name: 'HelloWorld2',

  mounted() {
    // eslint-disable-next-line no-unused-vars
    map = new AMap.Map('container', {
      zoom: 15,
      expandZoomRange: true,
      zooms: [4, 18],//设置地图级别范围
      center: [121.24547, 30.158781],//lat,lon
      // mapStyle: 'amap://styles/macaron', //设置地图的显示样式
      pitch: 30, // 地图俯仰角度，有效范围 0 度- 83 度
      viewMode: '3D',// 地图模式
      resizeEnable: true,//这个好像有问题,自动定位

    });

    var lnglats = [
      [116.368904, 39.923423],
      [116.382122, 39.921176],
      [116.387271, 39.922501],
      [116.398258, 39.914600]
    ];
    infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    for (var i = 0; i < lnglats.length; i++) {
      var marker = new AMap.Marker({
        position: lnglats[i],
        map: map
      });
      marker.content = '我是第' + (i + 1) + '个Marker';
      marker.on('click', this.markerClick);
      marker.emit('click', {target: marker});
      markerList.push(marker)
    }


    map.setFitView();
    map.on('click', this.mapClick)


  },
  data() {
    return {}
  },
  methods: {
    addMarker() {

    },
    removeMarker() {
      map.clearInfoWindow()
    },
    addInfoWindow() {

    },

    markerClick(e) {
      infoWindow.setContent(e.target.content);
      infoWindow.open(map, e.target.getPosition());
    },

    mapClick(){
      map.clearInfoWindow()
    },

    openInfo() {
      var latlon = [116.368904, 39.923423]
      // alert(markerList.length)
      // console.log(markerList)
      // alert(markerList[0].getPosition())

      var allOverlays = map.getAllOverlays('marker');
      // alert(allOverlays.length)

      for (let i = 0, marker; i < allOverlays.length; i++) {
        marker = allOverlays[i];
        if (marker.getPosition().distance(latlon) == 0) {
          map.setZoomAndCenter(18, marker.getPosition())
          infoWindow.setContent(marker.getContent());
          infoWindow.open(map, marker.getPosition());
          // markerList[i].setAnimation("AMAP_ANIMATION_BOUNCE")
          // alert(marker[i].name)
        }
      }


    },
    closeInfo() {

    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>


* {
  padding: 0;
  margin: 0;
}

#container {
  //margin: 30px auto;
  //width: 500px;
  //height: 500px;
  width: 100vw;
  height: 100vh;
}

.btn {
  width: 100px;
  height: 100px;
}


</style>
